import { RouteRecordRaw } from 'vue-router';
/***
 * Each Page has multi different components combined a page
 * The root Layout Component all goes in /src/layouts/*.vue
 */
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        name: 'Home',
        component: () => import('pages/Home.vue'),
        redirect: { name: 'Featured' },
        children: [
          {
            path: '',
            name: 'Featured',
            component: () => import('src/pages/home/Featured.vue'),
          },
          {
            path: 'followed',
            name: 'Followed',
            component: () => import('src/pages/home/Followed.vue'),
          },
          {
            path: 'newtranslations',
            name: 'NewTranslations',
            component: () => import('src/pages/home/NewTranslations.vue'),
          },
          {
            path: 'discover',
            name: 'Discover',
            component: () => import('src/pages/home/Discover.vue'),
          },
        ],
      },
    ],
  },
  {
    path: '/my',
    component: () => import('layouts/MyLayout.vue'),
    children: [
      // {
      //   path: 'following',
      //   name: 'Following',
      //   component: () => import('src/pages/my/Following.vue'),
      // },
      {
        path: 'library',
        name: 'Library',
        component: () => import('src/pages/my/Library.vue'),
        redirect: { name: 'Saved' },
        children: [
          {
            path: 'saved',
            name: 'Saved',
            component: () => import('src/pages/my/LibraryViews/Saved.vue'),
          },
          {
            path: 'history',
            name: 'History',
            component: () => import('src/pages/my/LibraryViews/History.vue'),
          },
          {
            path: 'liked',
            name: 'Liked',
            component: () => import('src/pages/my/LibraryViews/Liked.vue'),
          },
        ],
      },
      {
        path: 'contents',
        name: 'MyContents',
        component: () => import('src/pages/my/MyContents.vue'),
        redirect: { name: 'MyVideos' },
        children: [
          {
            path: 'videos',
            name: 'MyVideos',
            component: () => import('src/pages/my/MyContentsViews/Videos.vue'),
          },
          {
            path: 'audios',
            name: 'MyAudios',
            component: () => import('src/pages/my/MyContentsViews/Audios.vue'),
          },
          {
            path: 'playlists',
            name: 'MyPlaylists',
            component: () =>
              import('src/pages/my/MyContentsViews/Playlists.vue'),
          },
        ],
      },
      {
        path: 'connections',
        name: 'Connections',
        component: () => import('src/pages/my/Connections.vue'),
        redirect: { name: 'Following' },
        children: [
          {
            path: 'following',
            name: 'Following',
            component: () =>
              import('src/pages/my/ConnectionsViews/Following.vue'),
          },
          {
            path: 'followers',
            name: 'Followers',
            component: () =>
              import('src/pages/my/ConnectionsViews/Followers.vue'),
          },
        ],
      },
      {
        path: 'analytics',
        name: 'Analytics',
        component: () => import('src/pages/my/Analytics.vue'),
        redirect: { name: 'Overview' },
        children: [
          {
            path: 'overview',
            name: 'Overview',
            component: () => import('src/pages/my/AnalyticsViews/Overview.vue'),
          },
          {
            path: 'audience',
            name: 'Audience',
            component: () => import('src/pages/my/AnalyticsViews/Audience.vue'),
          },
          {
            path: 'insights',
            name: 'Insights',
            component: () => import('src/pages/my/AnalyticsViews/Insights.vue'),
          },
        ],
      },
      {
        path: 'profiles',
        redirect: { name: 'ProfileHome' },
        component: () => import('src/pages/my/Profiles.vue'),
        children: [
          {
            path: 'home',
            name: 'ProfileHome',
            component: () => import('src/pages/my/ProfileViews/Home.vue'),
          },
          {
            path: 'uploads',
            name: 'ProfileUploads',
            component: () => import('src/pages/my/ProfileViews/Uploads.vue'),
          },
          {
            path: 'playlists',
            name: 'ProfilePlaylists',
            component: () => import('src/pages/my/ProfileViews/Playlists.vue'),
          },
          {
            path: 'about',
            name: 'ProfileAbout',
            component: () => import('src/pages/my/ProfileViews/About.vue'),
          },
        ],
      },
    ],
  },
  {
    path: '/video',
    component: () => import('layouts/VideoLayout.vue'),
    children: [
      {
        path: ':id',
        name: 'Video',
        component: () => import('pages/Video.vue'),
      },
    ],
  },
  {
    path: '/playlist',
    component: () => import('layouts/VideoLayout.vue'),
    children: [
      {
        path: ':id',
        name: 'Playlist',
        component: () => import('pages/Video.vue'),
      },
    ],
  },
  {
    path: '/audio',
    component: () => import('layouts/VideoLayout.vue'),
    children: [
      {
        path: ':id',
        name: 'Audio',
        component: () => import('pages/Video.vue'),
      },
    ],
  },

  {
    path: '/studio',
    component: () => import('layouts/StudioLayout.vue'),
    redirect: { name: 'Studio' },
    children: [
      {
        path: ':id',
        name: 'Studio',
        component: () => import('pages/Studio.vue'),
      },
    ],
  },
  {
    path: '/user',
    redirect: { name: 'UserHome' },
    component: () => import('layouts/UserLayout.vue'),
    children: [
      {
        path: ':id',
        component: () => import('pages/users/UserProfile.vue'),
        children: [
          {
            path: 'home',
            name: 'UserHome',
            component: () => import('pages/users/Home.vue'),
          },
        ],
      },
    ],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/Error404.vue'),
  },
];

export default routes;
